<template>
  <CommBG>
    <div class="electron_help_wrapper pos_absolute flex_header_main">
      <UserOrgInfo />
      <div class="electron_help_main flex_main">
        <div class="snapshot_title" v-for="(item, index) in dataList" :key="index">
          <div class="row_title">{{ item.title }}</div>
          <div>
            <div v-for="(sitem, sindex) in item.dataList" :key="sindex">
              <div class="row_label">{{ sitem.label }}</div>
              <div v-if="sitem.img">我是图片</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CommBG>
</template>

<script lang="ts" setup name="user_orderPage">
  import CommBG from '@/components/bg/CommBG.vue'
  import UserOrgInfo from '@/components/user/UserOrgInfo.vue'

  const dataList = [
    {
      title: '【学习照片文件要求】',
      dataList: [{ label: ' 1、图片大小需要小于3M' }, { label: ' 2、照片要求格式为.jpg' }],
    },
    {
      title: '【如何截图？】',
      dataList: [
        { label: ' 第一步：登录中国电子学会考试网站' },
        { label: 'http://px.cie.org.cn' },
        { label: '第二步：前往【个人中心】界面', img: '1111' },
        { label: '第三步：点击【培训考核】-【已考试】', img: '1111' },
        { label: '第四步：在当前界面截图【考试成绩截图】', img: '1111' },
      ],
    },
  ]
</script>

<style scoped lang="less">
  .electron_help_wrapper {
    .electron_help_main {
      background: #ffffff;
      border-radius: 90px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: 60px 52px;
      .row_title {
        font-weight: bold;
        margin-bottom: 11px;
        font-size: 28px;
        color: #4548f4;
      }
      .row_label {
        font-weight: 600;
        font-size: 28px;
        color: #000000;
      }
    }
  }
</style>
